<template>
  <view class="repayment_list">
    <z-paging ref="paging" v-model="records" @query="queryList">
      <template #top>
        <z-nav-bar id="nav" bgColor="#ffffff" title="还款记录"></z-nav-bar>
        <up-sticky offset-top="0">
          <view class="df top_sel justify-between">
            <view class="df align-center"   @click="show = true">
              <text class="top_sel_text mgr-12">筛选还款日期:</text>
              <up-input

                style="width: 400rpx"
                v-model="timeText"
                :disabled="true"
                disabledColor="#fff"
                border="none"
                placeholder="请选择年月"
              ></up-input>
            </view>

          </view>
        </up-sticky>
      </template>
      <view class="record-list mgt-20">
        <view class="record-item" v-for="(item, index) in records" :key="index">
          <view class="record-title">
            <text>还款</text>
          </view>
          <view class="record-info">
            <view class="info-item">
              <text class="label">还款金额:</text>
              <text class="value">¥{{ item.repaymentAmount }}</text>
            </view>
            <view class="info-item">
              <text class="label">结算方式:</text>
              <text class="value">微信支付</text>
            </view>
            <view class="info-item" v-if="item.paymentNotes">
              <text class="label">备注:</text>
              <text class="value">{{ item.paymentNotes }}</text>
            </view>
            <view class="info-item">
              <text class="label">付款用户:</text>
              <text class="value">{{ item.sysUser.loginName}}</text>
            </view>
            <view class="info-item">
              <text class="label">交易时间:</text>
              <text class="value">{{ item.paymentTime }}</text>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
    <up-datetime-picker
      ref="datetimePickerRef"
      v-model="datetime"
      :show="show"
      @cancel ="show = false"
      @close="close"
      :closeOnClickOverlay="true"
      @confirm="confirm"
      mode="year-month"
      :formatter="formatter"
    ></up-datetime-picker>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onReady ,onLoad} from '@dcloudio/uni-app'
import {recordQryPayList} from '@/api/pagesMy/user'
const paging = ref(null)
const groupCardNo = ref('')
const datetimePickerRef=ref(null)
const show = ref(false);
const records = ref([
]);
const datetime = ref(new Date())
const timeRang = reactive({})
const timeText = ref('')
const queryList = (pageNo, pageSize) => {
  recordQryPayList({
    pageNum:pageNo,
    pageSize:pageSize,
    groupCardNo: groupCardNo.value,
    ...timeRang
  }).then(res=>{
    paging.value.complete(res)
  })
}
const formatter = (type, value) => {
  if (type === 'year') {
    return `${value}年`;
  }
  if (type === 'month') {
    return `${value}月`;
  }
  return value;
};
function timestampToYearMonth(timestamp) {
  // 创建一个Date对象，传入时间戳
  const date = new Date(timestamp);

  // 获取年份
  const year = date.getFullYear();

  // 获取月份，注意月份是从0开始的，所以需要加1
  const month = date.getMonth() + 1;

  // 返回格式化后的年月字符串

  return {
    label: `${year}年${month}月`,
    value: `${year}-${month}`
  }
}

const confirm =(e)=>{
  const timeInfo  =  timestampToYearMonth(e.value)
  timeText.value = timeInfo.label
   const {    firstDay, lastDay} =getMonthFirstAndLastDay(timeInfo.value)
  timeRang.paymentStartTime = firstDay
  timeRang.paymentEndTime = lastDay
  show.value = false
  paging.value.reload()
}
function getMonthFirstAndLastDay(dateStr) {
  // 解析年月
  const [year, month] = dateStr.split('-').map(Number);

  // 获取当月第一天
  const firstDay = `${year}-${String(month).padStart(2, '0')}-01`;

  // 获取当月最后一天
  let lastDay;
  if (month === 2) {
    // 处理2月份，需要判断是否闰年
    const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
    lastDay = `${year}-02-${isLeapYear ? '29' : '28'}`;
  } else if ([4, 6, 9, 11].includes(month)) {
    // 30天的月份
    lastDay = `${year}-${String(month).padStart(2, '0')}-30`;
  } else {
    // 31天的月份
    lastDay = `${year}-${String(month).padStart(2, '0')}-31`;
  }

  return {
    firstDay,
    lastDay
  };
}
const close =()=>{
  show.value = false
}
onReady(() => {
  // 微信小程序需要用此写法
  datetimePickerRef.value.setFormatter(formatter);
});
onLoad((options)=>{
  groupCardNo.value = options.groupCardNo
})
</script>

<style lang="scss" scoped>
.top_sel{
  box-sizing: border-box;
  padding: 32rpx ;
  width: 100%;
  background-color: #FFFFFF;
  .top_sel_text{
    font-size: 28rpx;
  }

}
.record-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.record-item {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
}

.record-title {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  margin-bottom: 24rpx;
}

.record-info {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.info-item {
  display: flex;
  align-items: center;
}

.label {
  font-size: 14px;
  color: #999999;
  width: 140rpx;
  flex-shrink: 0;
}

.value {
  font-size: 14px;
  color: #333333;
}
</style>
